<template>
  <div class="box">
    <div class="box-title flex flex-j-sb">
      <div>订单统计</div>
      <minxin @changed="(val)=>{params.searchType = val}" />
    </div>
    <!-- 数据 -->
    <div class="box-list flex">
      <div class="box-item">
        <div class="value">{{overViewList.uvNum  || 0}}</div>
        <div class="title">访客数UV</div>
      </div>
      <div class="box-item">
        <div class="value">{{overViewList.orderConversionRate  || 0}}</div>
        <div class="title">下单转化率</div>
      </div>
      <div class="box-item">
        <div class="value">{{overViewList.paymentsConversionRate  || 0}}</div>
        <div class="title">付款转化率</div>
      </div>
      <div class="box-item">
        <div class="value">{{overViewList.overallConversionRate  || 0}}</div>
        <div class="title">全店转化率</div>
      </div>
      <div class="box-item">
        <div class="value">{{overViewList.orderNum  || 0}}</div>
        <div class="title">下单笔数</div>
      </div>
      <div class="box-item">
        <div class="value">{{overViewList.orderMemberNum  || 0}}</div>
        <div class="title">下单人数</div>
      </div>
      <div class="box-item">
        <div class="value">￥{{overViewList.orderAmount| unitPrice}}</div>
        <div class="title">下单金额</div>
      </div>
      <div class="box-item">
        <div class="value">{{overViewList.paymentOrderNum || 0}}</div>
        <div class="title">付款笔数</div>
      </div>
      <div class="box-item">
        <div class="value">￥{{overViewList.paymentAmount | unitPrice}}</div>
        <div class="title">付款金额</div>
      </div>
      <div class="box-item">
        <div class="value">{{overViewList.refundOrderNum  || 0}}</div>
        <div class="title">退单笔数</div>
      </div>
      <div class="box-item">
        <div class="value">{{overViewList.refundOrderPrice  || 0}}</div>
        <div class="title">退单金额</div>
      </div>
    </div>
    <!-- 漏斗 -->
    <div class="shap">
      <div class="overViewChart">
        <!-- 上 -->
        <div class="block">
          <div class="order-box">
            <span>访客数</span>
            <span>{{overViewList.uvNum  || 0}}</span>
          </div>
        </div>
        <!-- 中 -->
        <div class="block">
          <div class="order-box">
            <span>下单笔数</span>
            <span>{{overViewList.orderNum  || 0}}</span>
          </div>
        </div>
        <!-- 下 -->
        <div class="block">
          <div class="order-box">
            <span>付款笔数</span>
            <span>{{overViewList.paymentOrderNum  || 0 }}</span>
          </div>
        </div>
        <!-- 线 -->
        <div class="rightBorder">
        </div>
        <div class="leftTopBorder">
        </div>
        <div class="leftBottomBorder">
        </div>
        <!--数据 -->
        <div class="leftTopTips">
          <div>下单转化率 </div>
          <div>{{overViewList.orderConversionRate  || '0%' }}</div>
        </div>
        <div class="leftBottomTips">
          <div>付款转化率</div>
          <div>{{overViewList.paymentsConversionRate  || '0%'}}</div>
        </div>
        <div class="rightTips">
          <div>整体转换率</div>
          <div>{{overViewList.overallConversionRate  || '0%'}}</div>
        </div>
      </div>
    </div>

    <!-- 统计图 -->
    <view style="width: 100%; height:500rpx">
      <l-f2 ref="chart"></l-f2>
    </view>
  </div>
</template>

<script>
import F2 from "@/components/lime-f2/components/lime-f2/f2.min.js";
import lF2 from "@/components/lime-f2/components/lime-f2/";
import {
  getOrderStatistics,
  getOrderOverView,
  getOrderChart,
} from "@/api/member";
import storage from "@/utils/storage.js"; //缓存
import minxin from "./mixins.vue"; //公共minxin选择 时间组件 这里使用components来引入
export default {
  components: { lF2, minxin },
  data() {
    return {
      overViewList: {}, //交易概况
      params: {
        searchType: "LAST_SEVEN",
        year: "",
        month: "",
        storeId: storage.getUserInfo().id || "",
      },

      orderStatistics: "", //订退单统计
      orderChartList: "", //图表
    };
  },
  watch: {
    "params.searchType": {
      handler() {
        this.init();
      },
    },
  },
  methods: {
    // 初始化
    async init() {
      Promise.all([
        await getOrderOverView(this.params),
        await getOrderStatistics({
          ...this.params,
          ...{ pageNumber: 1, pageSize: 10 },
        }),
        await getOrderChart(this.params),
      ]).then((res) => {
        if (res[0].data.success && res[1].data.success && res[2].data.success) {
          this.overViewList = res[0].data.result;
          this.orderStatistics = res[1].data.result.records;
          this.orderChartList = res[2].data.result;
          this.renderChart(); //绘制图表
        }
      });
    },
    // 渲染图表
    renderChart() {
      this.$nextTick(() => {
        this.$refs.chart.init((config) => {
          config.padding = [50, 50, 50, 50];
          const chart = new F2.Chart(config);
          let data = this.orderChartList;

          data.forEach((item) => {
            item.title = "交易额";
          });

          chart.scale("createTime", {
            type: "timeCat",
            tickCount: 3,
          });

          chart.axis("date", {
            label: function label(text, index, total) {
              // 只显示每一年的第一天
              const textCfg = {};
              if (index === 0) {
                textCfg.textAlign = "left";
              } else if (index === total - 1) {
                textCfg.textAlign = "right";
              }
              return textCfg;
            },
          });
          chart.source(data);
          chart.tooltip({
            custom: true, // 自定义 tooltip 内容框
            onChange: function onChange(obj) {
              const legend = chart.get("legendController").legends.top[0];
              const tooltipItems = obj.items;
              const legendItems = legend.items;
              const map = {};
              legendItems.forEach(function (item) {
                map[item.name] = _.clone(item);
              });
              tooltipItems.forEach(function (item) {
                const name = item.name;
                const value = item.value;
                if (map[name]) {
                  map[name].value = value;
                }
              });
              legend.setItems(_.values(map));
            },
            onHide: function onHide() {
              const legend = chart.get("legendController").legends.top[0];
              legend.setItems(chart.getLegendItems().country);
            },
          });
          chart.line().position("createTime*price").color("title");
          chart.point().position("createTime*price").color("title");

          chart.tooltip({
            showCrosshairs: false,
            shared: true,
            custom: false,
            offsetX: -200,
          });
          chart.render();

          return chart;
        });
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
@import "./styles.scss";
* {
  font-size: 24rpx;
}
.box-title {
  margin-bottom: 40rpx !important;
}
.title,
.value {
  font-size: 24rpx !important;
}
.box-list {
  flex-wrap: wrap;
  background: #f8f8f8;
  margin-bottom: 40rpx;
}
.box-item {
  display: flex;
  flex-direction: column;
  width: 25%;
  align-items: center;
  padding: 20rpx 0;

  margin: 20rpx 0;
}
.shap {
  width: 100%;
  height: 464rpx;
  > .overViewChart {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-left: 20rpx;
    > .leftTopTips {
      position: absolute;
      top: 40rpx;
      left: -2rpx;
      width: 85rpx;
      text-align: center;
      background: rgb(255, 255, 255);
      z-index: 1;
      padding: 5rpx 0rpx;
    }
    > .leftBottomTips {
      position: absolute;
      bottom: 60rpx;
      left: -2rpx;
      width: 85rpx;
      text-align: center;
      background: rgb(255, 255, 255);
      z-index: 1;
      padding: 5rpx 0rpx;
    }
    > .rightTips {
      position: absolute;
      bottom: 180rpx;
      right: 0rpx;
      width: 85rpx;
      text-align: center;
      background: rgb(255, 255, 255);
      z-index: 1;
      padding: 5rpx 0rpx;
    }
    > .rightBorder {
      width: 110rpx;
      position: absolute;
      top: 30rpx;
      right: 40rpx;
      border: 2rpx solid #d9d9d9;
      border-left: 0;
      height: 280rpx;
    }
    > .leftTopBorder {
      border: 2rpx solid #d9d9d9;
      height: 130rpx;
      width: 56rpx;
      position: absolute;
      left: 40rpx;
      top: 30rpx;
      border-right: 0;
    }
    > .leftBottomBorder {
      width: 108rpx;
      border: 2rpx solid #d9d9d9;
      height: 150rpx;
      position: absolute;
      bottom: 45rpx;
      left: 40rpx;
      border-right: 0;
    }
    > .block {
      height: 0rpx;
      border-left: 30rpx solid transparent;
      border-right: 30rpx solid transparent;
      position: relative;
      background: rgb(255, 255, 255);
      z-index: 1;
      position: relative;
    }
    > .block:nth-of-type(1) {
      width: 240rpx;
      border-top: 120rpx solid #ff4646;
      > .order-box {
        > span {
          font-size: 24rpx;
        }
        top: -100rpx;
        width: 240rpx;
        height: 90rpx;
      }
    }
    > .block:nth-of-type(2) {
      width: 172rpx;
      border-top: 120rpx solid #ff8585;
      margin-top: 10rpx;
      > .order-box {
        > span {
          font-size: 24rpx;
        }
        top: -110rpx;
        width: 172rpx;
        height: 100rpx;
      }
    }
    > .block:nth-of-type(3) {
      width: 100rpx;
      margin-top: 10rpx;
      border-top: 150rpx solid #ffb396;
      border-left: 32rpx solid transparent;
      border-right: 32rpx solid transparent;

      > .order-box {
        > span {
          font-size: 24rpx;
        }
        top: -150rpx;
        width: 100rpx;
        height: 120rpx;
        z-index: 2;
      }
    }
    /deep/ .order-box {
      color: #fff;
      position: absolute;

      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16rpx;
        font-weight: bold;
      }
    }
  }
}
.order-box{
  left: 50%;
  transform: translateX(-50%);
}
</style>